<template>
	<div class="abf">
		<el-container>
			<el-aside width="auto">
				<el-menu :collapse="isopen" default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
					@close="handleClose" background-color="#304156" text-color="#fff" active-text-color="#ffd04b"
					style="height:100%;">
					<el-menu-item @click="click()" style="height: 6%;background-color: #000000;">
						<span slot="title" style="color: #FFFFFF;padding-right: 20px;"><i
								class="el-icon-s-check"></i>考试系统</span>
					</el-menu-item>
					<el-submenu index="1" v-if="roles==='ROLE_ADMIN'||roles==='ROLE_TEACHER'">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span style="padding-right: 50px;">系统管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="1-2" @click="jsgl()"><i class="el-icon-user-solid"></i>教师管理
							</el-menu-item>
							<el-menu-item index="1-5" @click="xsgl()"><i class="el-icon-user"></i>学生管理</el-menu-item>
							<el-menu-item index="1-3" @click="bjgl()"><i class="el-icon-bell"></i>班级管理</el-menu-item>
							<el-menu-item index="1-6" @click="kcgl()"><i class="el-icon-s-order"></i>课程管理</el-menu-item>
							
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="2" v-if="roles==='ROLE_ADMIN'||roles==='ROLE_STUDENT'">
						<template slot="title">
							<i class="el-icon-s-order"></i>
							<span style="padding-right: 50px;">考试管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="2-1" @click="examgl()"><i class="el-icon-s-promotion"></i>在线考试
							</el-menu-item>
							<el-menu-item index="2-3" @click="kscj()"><i class="el-icon-s-release"></i>考试成绩
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="3" v-if="roles==='ROLE_ADMIN'||roles==='ROLE_TEACHER'">
						<template slot="title">
							<i class="el-icon-edit"></i>
							<span style="padding-right: 50px;">试题管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="3-2" @click="tkgl()"><i class="el-icon-s-claim"></i>题库管理</el-menu-item>
							<el-menu-item index="3-3" @click="stgl()"><i class="el-icon-s-order"></i>试题管理</el-menu-item>
							<el-menu-item index="3-4" @click="zsdgl()"><i class="el-icon-date"></i>知识点管理</el-menu-item>
							<el-menu-item index="3-5" @click="sjsz()"><i class="el-icon-setting"></i>试卷设置</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header style="height:6%;">
					<i :class="headericon" @click="headericons()"
						style="float:left;font-size:20px;padding:20px 0;padding-right: 15px;"></i>
					<span style="float:left ;font-weight:bold;font-size: 23px;">
						Computer-based system--机考系统
					</span>
					<span style="margin-left:40%;font-size:15px;float: right;">
						{{name}} , 欢迎您!
						<el-button type="text" icon="el-icon-s-help" @click="alter()">修改密码</el-button>
						<el-button type="text" icon="el-icon-delete-solid" @click="logout()">退出登录</el-button>
					</span>
				
				</el-header>
				<el-main>
					<router-view></router-view>
				</el-main>
				<el-footer style="height:6%;">
					<span>
						&copy 2021 Computer-based system@19级软件3班;
					</span>
					<span style="position: absolute;right: 10px;">
						{{nowTime}}
					</span>
				</el-footer>
			</el-container>
		</el-container>
	</div>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				headericon: 'el-icon-s-fold',
				isopen: false,
				nowTime: '',
				dialogVisible: false,
				roles: '',
				name: '',
			}
		},
		methods: {
			headericons() {
				this.isopen == false ? this.isopen = true : this.isopen = false;
				this.headericon == 'el-icon-s-fold' ? this.headericon = 'el-icon-s-unfold' :
					this.headericon = 'el-icon-s-fold'
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			timeFormate(timeStamp) {
				let year = new Date(timeStamp).getFullYear();
				let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) :
					new Date(timeStamp).getMonth() + 1;
				let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp)
					.getDate();
				let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp)
					.getHours();
				let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(
					timeStamp).getMinutes();
				this.nowTime = year + "." + month + "." + date + "  " + "星期" + '日一二三四五六'.charAt(new Date().getDay()) +
					" " + hh + ":" + mm;
			},
			nowTimes() {
				this.timeFormate(new Date());
				setInterval(this.nowTimes, 1000);
				this.clear()
			},
			click() {
				this.$router.push('/new')
			},
			clear() {
				clearInterval(this.nowTimes)
				this.nowTimes = null;
			},
			ksxx() {
				this.$router.push('/ksxx')
			},
			zxks() {
				this.$router.push('/zxks')
			},
			cjcx() {
				this.$router.push('/cjcx')
			},
			jsgl() {
				this.$router.push('/jsgl')
			},
			xsgl() {
				this.$router.push('/xsgl')
			},
			bjgl() {
				this.$router.push('/bjgl')
			},
			kcgl() {
				this.$router.push('/kcgl')
			},
			classcourse() {
				this.$router.push('/classcourse')
			},
			examgl() {
				this.$router.push('/examgl/index')
			},
			alter() {
				this.$router.push('/password')
			},
			stgl() {
				this.$router.push('/teacher/stgl')
			},
			tkgl() {
				this.$router.push('/teacher/tkgl')
			},
			examgl() {
				this.$router.push('/exam/zxks')
			},
			sjsz() {
				this.$router.push('/teacher/sjsz')
			},
			zsdgl() {
				this.$router.push('/exam/zsdgl')
			},
			kscj() {
				this.$router.push('/kscj')
			},
			/* scorequery() {
				this.$router.push('/scorequery')
			}, */
			logout() {
				this.$ajax.post('logout', {}).then(res => {
					var result = res.data;
					if (result.success) {
						this.$notify.success({
							title: '提示',
							message: '注销成功',
							position: 'bottom-right'
						});
						window.sessionStorage.clear();
						this.$router.replace('/');
						window.location.reload();
					}
				})
			}
		},
		mounted() {
			this.nowTimes();
		},
		created() {
			if(!window.sessionStorage.getItem("roles")){
				this.$message.error("请先登录！")
				this.$router.push("/")
				return
			}
			this.roles = window.sessionStorage.getItem("roles");
			this.name = window.sessionStorage.getItem("name");
			console.log(this.roles)
			
		},
	};
</script>

<style >
	html,
	body,
	#app,
	.abf,
	.el-container {
		padding: 0px;
		margin: 0px;
		height: 100%;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	.el-submenu__title:hover {
		background-color: rgba(0, 0, 0, 0.3) !important;
	}

	.el-menu-item:hover {
		background-color: rgba(134, 134, 134, 0.3) !important;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 6vh;
	}

	.el-submenu__title {
		font-size: 14px;
		color: #e7ecf5;
	}

	.el-menu-item {
		font-size: 14px;
		color: #e8eeef;
	}

	.el-aside {
		display: block;
		position: relative;
		overflow-x: hidden;
		overflow-y: hidden;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #ffffff;
		color: #333;
		overflow-y: hidden;
		/* text-align: center; */
		/* line-height:83vh; */
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
	}
</style>
